<template>
	<view class="root f1">
		<label class="pl-24 pr-24 bgc-fff mb-20 pb-20">
			<text class="color-333 fs-30 lh-2 mt-12">分红条件</text>
			<input
				v-model="optionData.condition"
				maxlength="10"
				type="digit"
				placeholder="请输入分红条件"
				class="input f1 text-right color-888 fs-26"
			/>
		</label>

		<view class="mt-14 bgc-fff f1 safe-area-inset-bottom" :style="{ marginBottom: `126rpx` }">
			<view v-for="(option, key) in options" :key="key" class="pl-24 pr-24 mb-60">
				<text class="color-333 fs-30 lh-2 mt-12">
					{{ option.title }}
				</text>
				<slider
					show-value
					block-size="15"
					block-color="#fd4b3d"
					backgroundColor="#ffe0db"
					activeColor="#f94435"
					:value="option.value || option.min"
					:min="option.min"
					:max="option.max"
					@change="changeSlider($event, key)"
				/>
				<label class="fs-26 color-888 jc-sb">
					<text>{{ option.min }}{{ option.unit }}</text>
					<text>{{ option.max }}{{ option.unit }}</text>
				</label>
			</view>
		</view>

		<view
			class="bgc-fff jc-center fixed bottom-0 width-100percent safe-area-inset-bottom content-box"
			:style="{
				height: `120rpx`,
			}"
		>
			<button
				hover-class="tap-hover"
				:style="{
					margin: `0 24rpx`,
					backgroundImage: `linear-gradient(to right, #fd4b3d, #ff7b6f)`,
				}"
				class="fs-34 color-fff fw-500 lh-90"
				@click="saveData"
			>
				保存
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class Activity extends Vue {
		// component property
		optionData: AnyObject = {};

		public get options(): AnyObject {
			const { optionData } = this;
			return {
				term: {
					title: "分红期限",
					unit: "天",
					name: "term",
					value: optionData.term,
					min: 1,
					max: 90,
				},
				proportion: {
					title: "分红比例",
					unit: "%",
					name: "proportion",
					value: optionData.proportion,
					min: 0,
					max: 100,
				},
				netReceipts: {
					title: "商家实收",
					unit: "%",
					name: "income",
					value: optionData.income,
					min: 0,
					max: 90,
				},
				goldenRatio: {
					title: "赏金比例",
					unit: "%",
					name: "reward",
					value: optionData.reward,
					min: 0,
					max: 100,
				},
			};
		}
		onLoad() {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/index/getActivity").then(({ data }) => {
				this.optionData = data;
				uni.hideLoading();
			});
		}

		changeSlider({ detail }: AnyObject, key: string) {
			this.options[key].value = detail.value;
		}

		saveData() {
			const params = Object.values(this.options).map((option) => [option.name, option.value]);

			params.push(["condition", this.optionData.condition]);

			this.$request
				.get("/index/setActivity", Object.fromEntries(params))
				.then(({ msg: title }) => {
					uni.showToast({ title });
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	::v-deep {
		slider {
			margin: 12rpx 0 12rpx 24rpx;
			.uni-slider-handle-wrapper,
			.wx-slider-handle-wrapper {
				height: 20rpx;
			}
		}
	}
</style>